<template>
  <div>
    <!-- 表格部分 -->
    <el-table
      ref="singalTable"
      v-loading="listLoading"
      :data="list"
      :stripe="true"
      fit
      :height="tableHeight"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        align="center"
        width="50"
        label="序号"
      />
      <el-table-column
        label="状态"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.is_end | monthEndFilter() }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单位编码"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: center">{{ row.agency_code }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单位名称"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: left">{{ row.agency_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="年份"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.year }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="实发工资"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: right">{{ Number(row.s1).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  <uploadLoadSalaryMonthEnd v-if="upload_load" ref="uploadLoadSuccess" :agencyVerList="agencyVerList"  :api="'getProgressSalary'" @close="uploadClose" />
  </div>
</template>
<script>
import {
  getSalaryMonthEndPage,
  getSalaryMonthHistoryPage,
  checkRevokeMonthEnd,
  revokeMonthEnd
} from '@/api/thirteen/salaryMonthEnd' // secondary package based on el-pagination
import uploadLoadSalaryMonthEnd from './uploadLoadSalaryMonthEnd'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'

export default {
  name: 'SalaryMonthEnd',
  components: {Pagination, tableEmpty, uploadLoadSalaryMonthEnd},
  filters: {
    monthEndFilter(type) {
      if (type == '0') {
        return '未结'
      } else if (type == '1') {
        return '已结'
      }
    }
  },
  props: ['tabPane', 'treeData', 'year'],
  data() {
    return {
      tableHeight: null,
      list: null,
      total: 0,
      guid:'',
      loading: true,
      upload_load: false,
      listLoading: true,
      agencyVerList:[],
      params:[],
      listQuery: {
        page: 1,
        limit: 500,
        flag: '0',
        agencyId: '0',
        year: ''
      },
      formData: {
        agencyIds: []
      }
    }
  },
  watch: {
    list(val) {
      this.doLayout()
    },
    year(val) {
      this.listQuery.page = 1
      this.getList()
    }
  },
  created() {
    this.listQuery.page = 1
    this.listQuery.flag = this.tabPane
    if (this.treeData !== '' && this.treeData.length > 0) {
      this.listQuery.agencyId = this.treeData.id
    }
    this.getList()
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 审核日志
    processnode() {
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.$refs.app.getList(selection[0].agencyId)
    },
    // getList() {
    //   this.listLoading = false
    // },
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 220
    },
    getList() {
      this.listLoading = true
      if (this.listQuery.flag === '0') {
        getSalaryMonthEndPage(this.listQuery).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
      } else if (this.listQuery.flag === '1') {
        this.listQuery.year = this.year
        getSalaryMonthHistoryPage(this.listQuery).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
      }
    },
    handleFilter() {
      this.getList()
    },
    handleTree(data) {
      this.listQuery.agencyId = data.id
      this.listQuery.page = 1
      this.getList()
    },
    // 月结
    saveMonthEnd() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要年结的单位',
          type: 'warning',
          duration: 4000
        })
        this.$emit('monthEndCallback')
        return
      }
      // 操作单位列表
      this.agencyVerList = []
      selection.forEach(item => {
        const current = {}
        current['agencyId'] = item.agency_id
        current['bizKey'] = item.biz_key
        this.agencyVerList.push(current)
      })
          this.$msgbox({
          title: '是否确认年结',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
             
            if (action === 'confirm') {
              done();
              this.upload_load = true
            } else {
             done();
               instance.confirmButtonLoading = false;
              this. uploadClose()
              // done();
            }
          }
        }).then(action => {
           done();
          this.$message({
            type: 'info',
            message: 'error: ' + action
          });
        });
     
    },
     uploadClose() {
      this.upload_load = false
       this.$emit('monthEndCallback')
       this.handleFilter()
     
    },
    // 撤销月结
    revokeMonthEnd() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销年结的数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeMonthEndCallback')
        return
      }
      const operateAgencyId = []
      let year = ''
      selection.forEach(item => {
        operateAgencyId.push(item.agencyId)
        year = item.year
      })
      // 校验是否可以撤销月结
      const params = { 'year': year, 'agencyIds': operateAgencyId.join(',') }
      checkRevokeMonthEnd(params).then((response) => {
        if (response.data.flag === false) {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeMonthEndCallback')
        } else if (response.data.flag === true) {
 
          // const data = { 'year': year, 'agencyIds': operateAgencyId }
          revokeMonthEnd(selection).then((response) => {
            this.$message({
              showClose: true,
              message: '撤销年结成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeMonthEndCallback')
            this.listQuery.page = 1
            this.handleFilter()
          }).catch(() => {
            this.$emit('revokeMonthEndCallback')
          })
          // }).catch(() => {
          //   this.$emit('revokeMonthEndCallback')
          // })
        }
      }).catch(() => {
        this.$emit('revokeMonthEndCallback')
      })
    }
  }
}
</script>
